<template>
  <div>
    <!-- 新增任务 -->
    <div class="box-shadow">
      <el-form
        :model="addParams"
        ref="addRef"
        :rules="formRules"
        size="small"
        :inline="true"
        label-width="115px"
      >
        <!-- 基本信息 -->
        <div class="base-info">
          <div class="title-common">
            1&nbsp;&nbsp;&nbsp;{{ $t("基本信息") }}
            <div class="radiu"></div>
          </div>
          <el-row>
            <el-col :span="6" :xs="24">
              <el-form-item prop="taskName" :label="$t('任务名称') + ':'">
                <el-input
                  v-model="addParams.taskName"
                  :placeholder="$t('请输入')"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :xs="24">
              <span>{{ $t("所属地图") + "：" }}</span>
              <span>{{ mapId }}</span>
            </el-col>
            <el-col :span="6" :xs="24" style="margin-left: 30px">
              <el-form-item prop="addType" :label="$t('新增方式')">
                <el-radio-group
                  v-model="addParams.addType"
                  @change="addTypeChange"
                >
                  <el-radio label="1">{{ $t("自定义") }}</el-radio>
                  <el-radio label="2">{{ $t("选择模板") }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="4" :xs="24">
              <el-form-item
                v-if="isShowSelectTemplate"
                prop="tempId"
                :rules="addParams.addType == '1' ? formRules.tempId : []"
              >
                <el-select
                  v-model="addParams.tempId"
                  filterable
                  remote
                  reserve-keyword
                  clearable
                  :placeholder="$t('请输入关键词')"
                  @change="selectTemplateChange"
                  @clear="selectTemplateClear"
                >
                  <el-option
                    v-for="item in templateList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <!-- 巡检信息 -->
        <div class="inspect-info">
          <div class="title-common">
            2&nbsp;&nbsp;&nbsp;{{ $t("巡检信息") }}
            <div class="radiu"></div>
          </div>
          <el-row>
            <el-col :span="6" :xs="24">
              <el-form-item
                label-width="120px"
                prop="viewType"
                :label="$t('巡检类型') + ':'"
                ><el-select
                  v-model="addParams.viewType"
                  :placeholder="$t('请选择')"
                >
                  <el-option
                    v-for="dict in dict.type.viewType"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" :xs="24">
              <el-form-item
                label-width="123px"
                prop="overType"
                :label="$t('结束动作') + ':'"
              >
                <el-select
                  v-model="addParams.overType"
                  :placeholder="$t('请选择')"
                >
                  <el-option
                    v-for="dict in dict.type.overType"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="addParams.overType == '4'">
              <el-form-item
                prop="overStopPoint"
                :rules="
                  addParams.overType == '4' ? formRules.overStopPoint : []
                "
              >
                <el-input
                  v-model="addParams.overStopPoint"
                  autocomplete="off"
                  :placeholder="$t('请输入停靠点位置')"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="6" :xs="24">
              <el-form-item
                label-width="100px"
                prop="priority"
                label="优先级："
              >
                <el-select v-model="addParams.priority" placeholder="请选择">
                  <el-option
                    v-for="priority in priorityList"
                    :key="priority.value"
                    :label="priority.label"
                    :value="priority.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="7" :xs="24">
              <el-form-item
                label-width="100px"
                prop="dimension"
                :label="$t('巡检维度') + ':'"
              >
                <el-radio-group
                  v-model="addParams.dimension"
                  @change="treeNodeChange"
                >
                  <el-radio label="1">{{ $t("巡检对象维度") }}</el-radio>
                  <!-- <el-radio label="2">{{ $t("巡检点维度") }}</el-radio> -->
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <!-- 定点巡检 -->
        <el-row :gutter="20" class="fixed-point">
          <el-col :span="8" :xs="24" class="tree">
            <div class="title-common">
              3&nbsp;&nbsp;&nbsp;{{ $t("定点巡检") }}
              <div class="radiu"></div>
            </div>
            <el-row>
              <el-form-item prop="patrolPathType" :label="$t('巡检路径')">
                <el-radio-group
                  v-model="addParams.patrolPathType"
                  text-color="#00D1FF"
                  fill="#00D1FF"
                  @change="patrolPathTypeChange"
                >
                  <el-radio label="1">{{ $t("最优路径") }}</el-radio>
                  <el-radio label="2">{{ $t("勾选顺序") }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item
                v-show="showTree"
                :rules="addParams.dimension == '1' ? formRules.objTreeList : []"
                prop="objTreeList"
                :label="$t('选择巡检对象')"
                label-width="168px"
              >
                <el-tree
                  :data="deptOptions"
                  node-key="treeId"
                  :props="defaultProps"
                  :expand-on-click-node="false"
                  show-checkbox
                  ref="objTreeRef"
                  class="scroll-hidden"
                  default-expand-all
                  @node-click="nodeClick($event, 'obj')"
                  @check-change="
                    (item, isChecked) => treeCheckChange(item, isChecked, 'obj')
                  "
                >
                  <span
                    slot-scope="{ node, data }"
                    style="display: inline-block; width: 100%"
                    :style="
                      data.treeId == currentTreeId
                        ? 'background-color:rgba(0, 209, 255, 0.2)'
                        : ''
                    "
                  >
                    <img
                      :src="objIcons[data.iconType]"
                      style="width: 16px; height: 16px"
                    />
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="data.name"
                      placement="right"
                    >
                      <span
                        style="margin-left: 10px"
                        :style="{
                          color:
                            (data.type == '2' || data.type == '3') &&
                            data.isParam == '0'
                              ? '#FF5562'
                              : '#FFFFFF',
                        }"
                        :title="data.name"
                        >{{ data.name | handleCtx("22") }}</span
                      >
                    </el-tooltip>

                    <span style="display: inline-block; width: 40px"></span>
                    <template v-if="addParams.patrolPathType == '2'">
                      <span
                        v-for="(item, index) in checkedObj"
                        :key="index"
                        style="display: inline-block"
                        ><span v-if="item.treeId == data.treeId">{{
                          index + 1
                        }}</span></span
                      >
                    </template>
                  </span>
                </el-tree>
                <el-row class="obj-text"
                  >{{
                    $t(
                      "注1红色图标代表未绑定巡检点请在QT工具上绑定虚拟对象无需绑定"
                    )
                  }}<br />
                  {{ $t("注2红色文字代表未填写对象参数请在QT工具上填写")
                  }}<br />
                  {{
                    $t(
                      "注3以上异常的巡检对象将无法正常巡检不会下发到巡检任务中"
                    )
                  }}</el-row
                >
              </el-form-item>
              <el-form-item
                label-width="161px"
                v-show="!showTree"
                :rules="
                  addParams.dimension == '2' ? formRules.pointTreeList : []
                "
                prop="pointTreeList"
                :label="$t('选择巡检点')"
              >
                <el-tree
                  :data="pointsList"
                  ref="pointTreeRef"
                  class="point-tree scroll-hidden"
                  node-key="id"
                  show-checkbox
                  :props="pointDefaultProps"
                  default-expand-all
                  @node-click="nodeClick($event, 'point')"
                  @check-change="
                    (item, isChecked) =>
                      treeCheckChange(item, isChecked, 'point')
                  "
                >
                  <span
                    slot-scope="{ node, data }"
                    style="display: inline-block; width: 100%"
                    :style="
                      data.id == currentTreeId
                        ? 'background-color:rgba(0, 209, 255, 0.2)'
                        : ''
                    "
                  >
                    <img
                      :src="pointsIcons[data.iconType]"
                      style="width: 16px; height: 16px"
                    />
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="data.name"
                      placement="right"
                    >
                      <span
                        style="margin-left: 10px"
                        :style="{
                          color:
                            (data.type == '2' || data.type == '3') &&
                            data.isParam == '0'
                              ? '#FF5562'
                              : '#FFFFFF',
                        }"
                        :title="data.name"
                        >{{ data.name | handleCtx("22") }}</span
                      >
                    </el-tooltip>

                    <span style="display: inline-block; width: 40px"></span>
                    <template v-if="addParams.patrolPathType == '2'">
                      <span
                        v-for="(item, index) in checkedObj"
                        :key="index"
                        style="display: inline-block"
                        ><span v-if="data.type == '1' && item.id == data.id">{{
                          index + 1
                        }}</span></span
                      >
                    </template>
                  </span>
                </el-tree>
                <el-row class="obj-text"
                  >{{ $t("注1该处仅展示已绑定巡检点的巡检对象") }}<br />
                  {{ $t("注2红色文字代表未填写对象参数请在QT工具上填写")
                  }}<br />
                  {{
                    $t(
                      "注3以上异常的巡检对象将无法正常巡检不会下发到巡检任务中"
                    )
                  }}</el-row
                >
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="16" :xs="24" class="imgs-preview">
            <div class="title-common">{{ $t("巡检对象预览") }}</div>
            <span v-if="addParams.dimension == '1'"
              >{{ $t("当前巡检对象") }}{{ objNodeName || $t("无") }}</span
            >
            <span v-if="addParams.dimension == '2'"
              >{{ $t("当前巡检点") }}{{ pointNodeName || $t("无") }}</span
            >
            <div class="flex-center">
              <div class="block-info">
                <div class="tabs">
                  <div
                    :class="[currentTab == '1' ? 'current-tab' : 'camero']"
                    @click="tabClick('1')"
                  >
                    {{ $t("可见光") }}
                  </div>
                  <div
                    :class="[currentTab == '2' ? 'current-tab' : 'camero']"
                    @click="tabClick('2')"
                  >
                    {{ $t("热成像") }}
                  </div>
                </div>
                <div class="img-box">
                  <canvas ref="canvasImg" class="canvasImg">
                    {{ $t("浏览器版本过低请去下载最新版本浏览器") }}
                  </canvas>
                  <div class="info">
                    <div>{{ $t("巡检点") }}：{{ pointName || $t("暂无") }}</div>
                    <div>0：{{ deviceName || $t("暂无") }}</div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <!-- 保存为任务模板 -->
        <div class="save-temp">
          <div class="title-common">
            4&nbsp;&nbsp;&nbsp;{{ $t("保存为任务模板") }}
            <div class="radiu"></div>
          </div>
          <div>
            <el-form-item
              prop="isSaveToTemp"
              :label="$t('是否保存为模板')"
              label-width="154px"
            >
              <el-radio-group
                v-model="addParams.isSaveToTemp"
                @change="isSaveTemplateChange"
              >
                <el-radio label="0">{{ $t("不保存") }}</el-radio>
                <el-radio label="1">{{ $t("保存") }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              v-if="isShowTaskTemplateName"
              prop="taskTemplateName"
              :label="$t('任务模板名称') + ':'"
              label-width="135px"
              :rules="
                addParams.isSaveToTemp == '0' ? formRules.taskTemplateName : []
              "
            >
              <el-input
                v-model="addParams.taskTemplateName"
                :placeholder="$t('请输入')"
              ></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div class="footer">
      <div @click="nextStep" class="serch-btn cursor-pointer">
        {{ $t("下一步") }}
      </div>
      <div @click="cancleBtn" class="reset-btn cursor-pointer">
        {{ $t("取消") }}
      </div>
    </div>
    <!-- 抽屉盒子 -->
    <el-drawer
      :title="drawerTitle"
      :visible.sync="drawerVisible"
      direction="rtl"
      :before-close="handleClose"
      size="35%"
    >
      <el-form
        :model="drawerForm"
        ref="drawerRef"
        :rules="drawerFormRules"
        :inline="true"
      >
        <el-form-item :label="$t('任务类型') + '：'" prop="taskType">
          <el-select
            v-model="drawerForm.taskType"
            @change="drawTaskChange"
            :placeholder="$t('请选择')"
          >
            <el-option
              v-for="dict in dict.type.taskType"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('启动时间') + '：'"
          prop="regularStartTime"
          v-if="
            drawerBooArr.find((item) => {
              return item.type == 'regular';
            }).bool
          "
          :rules="
            drawerBooArr.find((item) => {
              return item.type == 'regular';
            }).bool
              ? drawerFormRules.startTime
              : []
          "
        >
          <el-date-picker
            v-model="drawerForm.regularStartTime"
            :picker-options="timePickerOption"
            type="datetime"
            :placeholder="$t('选择开始时间')"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change="handleRegularStartTime"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          :label="$t('超时时长')"
          v-if="
            drawerBooArr.find((item) => {
              return item.type == 'immediate';
            }).bool
          "
        >
          <el-input
            style="width: 160px"
            :disabled="
              drawerBooArr.find((item) => {
                return item.type == 'immediate';
              }).bool
            "
            :placeholder="$t('即时任务无时长限制')"
          ></el-input>
          <label style="color: #fff">{{ $t("分钟") }}</label>
        </el-form-item>
        <el-form-item
          :label="$t('超时时长')"
          prop="overTimeLength"
          v-if="
            drawerBooArr.find((item) => {
              return item.type == 'regular';
            }).bool
          "
          :rules="
            drawerBooArr.find((item) => {
              return item.type == 'regular';
            }).bool
              ? drawerFormRules.overTimeLength
              : []
          "
        >
          <el-input-number
            v-model="drawerForm.overTimeLength"
            controls-position="right"
            :min="1"
            :max="100000000"
            style="width: 100px"
          ></el-input-number>
          <label style="color: #fff">{{ $t("分钟") }}</label>
        </el-form-item>
        <el-form-item
          :label="$t('超时动作')"
          prop="overTimeActionType"
          v-if="
            drawerBooArr.find((item) => {
              return item.type == 'immediate';
            }).bool ||
            drawerBooArr.find((item) => {
              return item.type == 'regular';
            }).bool
          "
          :rules="
            drawerBooArr.find((item) => {
              return item.type == 'immediate';
            }).bool ||
            drawerBooArr.find((item) => {
              return item.type == 'regular';
            }).bool
              ? drawerFormRules.overTimeActionType
              : []
          "
        >
          <el-row :gutter="20">
            <el-col :span="10">
              <el-select
                v-model="drawerForm.overTimeActionType"
                :placeholder="$t('请选择')"
                style="width: 160px"
                :disabled="
                  drawerBooArr.find((item) => {
                    return item.type == 'immediate';
                  }).bool
                    ? true
                    : false
                "
              >
                <el-option
                  v-for="item in drawActionOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="12" v-if="drawerForm.overTimeActionType == '4'">
              <el-form-item
                prop="stopPointOne"
                :rules="
                  drawerForm.overTimeActionType == '4'
                    ? formRules.stopPointOne
                    : []
                "
              >
                <el-input
                  v-model="drawerForm.stopPointOne"
                  autocomplete="off"
                  :placeholder="$t('请输入停靠点位置')"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item
          v-if="
            drawerBooArr.find((item) => {
              return item.type == 'immediate';
            }).bool ||
            drawerBooArr.find((item) => {
              return item.type == 'regular';
            }).bool
          "
          :label="$t('超期上限') + '：'"
          prop="agingTime"
          :rules="
            drawerBooArr.find((item) => {
              return item.type == 'immediate';
            }).bool ||
            drawerBooArr.find((item) => {
              return item.type == 'regular';
            }).bool
              ? drawerFormRules.agingTime
              : []
          "
        >
          <el-input-number
            v-model="drawerForm.agingTime"
            controls-position="right"
            :step="0.5"
            :min="0"
            :max="7"
            style="width: 220px"
          ></el-input-number>
          <span style="color: #fff; margin-left: 5px">{{ $t("天") }}</span>
        </el-form-item>
        <div
          class="draw-content-explain"
          v-if="
            drawerBooArr.find((item) => {
              return item.type == 'immediate';
            }).bool ||
            drawerBooArr.find((item) => {
              return item.type == 'regular';
            }).bool
          "
        >
          <div>
            {{
              $t(
                "超时时长从真实执行开始计时超出后将强制终止正在执行的任务不包含暂停时长"
              )
            }}
          </div>
          <div>
            {{ $t("超期上限从计划执行开始计时超出后将不再执行等待执行的任务") }}
          </div>
        </div>
        <!-- 周期任务 -->
        <div
          v-if="
            drawerBooArr.find((item) => {
              return item.type == 'cycle';
            }).bool
          "
        >
          <el-form-item
            :label="$t('周期类型')"
            prop="cycleType"
            :rules="
              drawerBooArr.find((item) => {
                return item.type == 'cycle';
              }).bool
                ? drawerFormRules.cycleType
                : []
            "
          >
            <el-radio-group v-model="drawerForm.cycleType">
              <el-radio label="1">{{ $t("定周期") }}</el-radio>
              <el-radio disabled label="2">{{ $t("不定周期") }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 常规 周期 -->
          <template>
            <!-- 标题 -->
            <div class="cycle-config">
              <div>{{ $t("配置") }}</div>
              <div class="chang-btn">
                <div>{{ $t("常规") }}</div>
                <div>{{ $t("高级") }}</div>
              </div>
            </div>
            <div class="model">
              <div class="model-title">
                <div>{{ $t("生效时段") }}</div>
              </div>
              <div class="take-effect-time">
                <el-form-item
                  :label="$t('开始日期') + '：'"
                  :rules="
                    drawerBooArr.find((item) => {
                      return item.type == 'cycle';
                    }).bool
                      ? drawerFormRules.startTime
                      : []
                  "
                  prop="startTime"
                >
                  <el-date-picker
                    v-model="drawerForm.startTime"
                    type="date"
                    :placeholder="$t('选择开始日期')"
                    :picker-options="pickerOptionsStart"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item
                  :label="$t('结束日期') + '：'"
                  :rules="
                    drawerBooArr.find((item) => {
                      return item.type == 'cycle';
                    }).bool
                      ? drawerFormRules.endTime
                      : []
                  "
                  prop="endTime"
                >
                  <el-date-picker
                    v-model="drawerForm.endTime"
                    type="date"
                    :placeholder="$t('选择结束日期')"
                    :picker-options="pickerOptionsEnd"
                  >
                  </el-date-picker>
                </el-form-item>
              </div>
              <div class="model-title" style="padding-top: 20px">
                <div>{{ $t("执行配置") }}</div>
                <div class="take-effect-time" style="border-bottom: 0">
                  <!-- 启动时间 -->
                  <el-form-item :label="$t('启动时间') + '：'" required>
                    <el-row>
                      <el-col :span="10">
                        <el-input-number
                          v-model="drawerForm.executeTimePre"
                          controls-position="right"
                          :min="0"
                          :max="23"
                          style="width: 100px"
                        ></el-input-number>
                      </el-col>
                      <el-col :span="3">{{ $t("小时") }}</el-col>
                      <el-col :span="10">
                        <el-input-number
                          v-model="drawerForm.executeTimeNext"
                          controls-position="right"
                          :min="0"
                          :max="59"
                          style="width: 100px"
                        ></el-input-number>
                      </el-col>
                      <el-col :span="1">{{ $t("分") }}</el-col>
                    </el-row>
                  </el-form-item>
                  <!-- 重复频率 -->
                  <el-form-item :label="$t('重复频率') + '：'" required>
                    <el-row>
                      <el-col :span="2">{{ $t("每") }}</el-col>
                      <el-col :span="8">
                        <el-input-number
                          v-model="drawerForm.repeatRate"
                          controls-position="right"
                          :min="0.5"
                          :step="0.5"
                          style="width: 100px"
                        ></el-input-number>
                      </el-col>
                      <el-col :span="10">
                        <el-select
                          v-model="drawerForm.repeatRateUnit"
                          :placeholder="$t('请选择')"
                        >
                          <el-option :label="$t('小时')" value="2"></el-option>
                          <el-option :label="$t('天')" value="3"></el-option>
                        </el-select>
                      </el-col>
                    </el-row>
                  </el-form-item>
                  <!-- 超时时长 -->
                  <el-form-item :label="$t('超时时长')" required>
                    <el-row>
                      <el-col :span="18" :xs="24">
                        <el-input-number
                          v-model="drawerForm.overTimeLength"
                          controls-position="right"
                          :min="1"
                          :max="100000000"
                          style="width: 100px"
                        ></el-input-number>
                      </el-col>
                      <label>{{ $t("分钟") }}</label>
                    </el-row>
                  </el-form-item>
                  <!-- 超时动作 -->
                  <el-form-item
                    :label="$t('超时动作')"
                    required
                    prop="overTimeActionType"
                  >
                    <el-row :gutter="20">
                      <el-col :span="10">
                        <el-select
                          v-model="drawerForm.overTimeActionType"
                          :placeholder="$t('请选择')"
                          style="width: 150px"
                        >
                          <el-option
                            :label="$t('原地待命')"
                            value="1"
                          ></el-option>
                          <el-option
                            :label="$t('回充电桩')"
                            value="2"
                          ></el-option>
                          <!-- <el-option label="回到起点" value="3"></el-option> -->
                          <el-option
                            :label="$t('前往停靠点')"
                            value="4"
                          ></el-option>
                        </el-select>
                      </el-col>
                      <el-col
                        :span="12"
                        v-if="drawerForm.overTimeActionType == '4'"
                      >
                        <el-form-item
                          prop="stopPointTwo"
                          :rules="
                            drawerForm.overTimeActionType == '4'
                              ? formRules.stopPointTwo
                              : []
                          "
                        >
                          <el-input
                            v-model="drawerForm.stopPointTwo"
                            autocomplete="off"
                            :placeholder="$t('请输入停靠点位置')"
                            clearable
                          ></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form-item>
                  <el-form-item :label="$t('超期上限') + '：'" required>
                    <el-col :span="22">
                      <el-input-number
                        v-model="drawerForm.agingTime"
                        controls-position="right"
                        :step="0.5"
                        :min="0"
                        :max="7"
                        style="width: 100px"
                      ></el-input-number>
                    </el-col>
                    <el-col :span="2" style="color: #fff">{{
                      $t("天")
                    }}</el-col>
                  </el-form-item>
                </div>
                <div
                  class="draw-content-explain"
                  v-if="
                    drawerBooArr.find((item) => {
                      return item.type == 'cycle';
                    }).bool
                  "
                >
                  <div>
                    {{
                      $t(
                        "超时时长从真实执行开始计时超出后将强制终止正在执行的任务不包含暂停时长"
                      )
                    }}
                  </div>
                  <div>
                    {{
                      $t(
                        "超期上限从计划执行开始计时超出后将不再执行等待执行的任务"
                      )
                    }}
                  </div>
                </div>
              </div>
            </div>
          </template>
          <!-- 高级 周期 -->
          <template v-if="false">
            <!-- 生效时段 -->
            <div class="model">
              <div class="model-title">
                <div>{{ $t("生效时段") }}</div>
              </div>
              <el-form-item
                :label="$t('生效时长')"
                prop="validType"
                :rules="
                  drawerBooArr.find((item) => {
                    return item.type == 'cycle';
                  }).bool
                    ? drawerFormRules.validType
                    : []
                "
              >
                <el-radio-group v-model="drawerForm.validType">
                  <el-radio label="1">{{ $t("永久生效") }}</el-radio>
                  <el-radio label="2">{{ $t("指定时段") }}</el-radio>
                </el-radio-group>
              </el-form-item>
              <!-- 快速设置 -->
              <div v-if="drawerForm.validType == '2'">
                <div class="hurry-setting">
                  <div class="title" style="padding-left: 20px">
                    {{ $t("快速设置") }}
                  </div>
                  <div
                    v-for="(item, index) in hurrySetting"
                    :key="index"
                    :class="[
                      'contents',
                      index == currentSetting ? 'current' : '',
                    ]"
                    @click="chooseQuickSetting(index)"
                  >
                    <div class="cursor-pointer">{{ item.label }}</div>
                  </div>
                </div>
                <!-- 快速设置 开始时间 -->
                <el-form-item
                  prop="quickStartDate"
                  :label="$t('开始时间') + ':'"
                  style="display: flex"
                  :rules="
                    drawerBooArr.find((item) => {
                      return item.type == 'cycle';
                    }).bool && drawerForm.validType == '2'
                      ? drawerFormRules.quickStartDate
                      : []
                  "
                >
                  <el-date-picker
                    v-model="drawerForm.quickStartDate"
                    type="datetime"
                    :placeholder="$t('选择开始时间')"
                  >
                  </el-date-picker>
                </el-form-item>
                <!-- 快速设置  结束时间-->
                <el-form-item
                  prop="quickEndDate"
                  :label="$t('结束时间') + ':'"
                  style="display: flex"
                  :rules="
                    drawerBooArr.find((item) => {
                      return item.type == 'cycle';
                    }).bool && drawerForm.validType == '2'
                      ? drawerFormRules.quickEndDate
                      : []
                  "
                >
                  <el-date-picker
                    v-model="drawerForm.quickEndDate"
                    type="datetime"
                    :placeholder="$t('选择结束时间')"
                  >
                  </el-date-picker>
                </el-form-item>
              </div>
            </div>
            <!-- 执行配置 -->
            <div class="config">
              <div class="model-title">{{ $t("执行配置") }}</div>
              <el-row>
                <!-- 重复频率 -->
                <el-form-item
                  :label="$t('重复频率' + '：')"
                  prop="repeatRate"
                  :rules="
                    drawerBooArr.find((item) => {
                      return item.type == 'cycle';
                    }).bool
                      ? drawerFormRules.repeatRate
                      : []
                  "
                >
                  <el-col :span="10">
                    <label>{{ $t("每") }}&nbsp;&nbsp;</label>
                    <el-input-number
                      v-model="drawerForm.repeatRate"
                      controls-position="right"
                      :min="0.5"
                      :step="0.5"
                      style="width: 100px"
                    ></el-input-number>
                  </el-col>
                  <el-col :span="14">
                    <el-select
                      v-model="drawerForm.repeatRateUnit"
                      :placeholder="$t('请选择')"
                      @change="repeatRateUnitChange"
                    >
                      <el-option
                        v-for="dict in dict.type.repeatRateUnit"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      >
                      </el-option>
                    </el-select>
                  </el-col>
                </el-form-item>
              </el-row>
              <el-row>
                <!-- 执行时间 -->
                <el-form-item :label="$t('执行时间') + ':'" required>
                  <!-- 月 -->
                  <el-row
                    class="month-time"
                    v-if="drawerForm.repeatRateUnit == '6'"
                  >
                    <label>{{ $t("月") }}</label>
                    <div
                      v-for="(item, index) in monthsData"
                      :key="index"
                      :class="['months', item.isSelected ? 'Active' : '']"
                      @click="monthClick(index, item)"
                    >
                      <div>{{ item.label }}</div>
                    </div>
                  </el-row>
                  <!-- 周 -->
                  <el-row
                    v-if="
                      drawerForm.repeatRateUnit == '4' ||
                      drawerForm.repeatRateUnit == '5' ||
                      drawerForm.repeatRateUnit == '6'
                    "
                    class="month-time"
                    style="margin: 15px 0"
                  >
                    <label>{{ $t("周") }}</label>
                    <div
                      v-for="(item, index) in weekData"
                      :key="index"
                      :class="['months', item.isSelected ? 'Active' : '']"
                      @click="weekClick(index, item)"
                    >
                      <div>{{ item.label }}</div>
                    </div>
                  </el-row>
                  <el-row class="month-time">
                    <label>{{ $t("秒") }}</label>
                    <div class="execute-time">
                      <el-form-item
                        prop="h"
                        v-if="
                          drawerForm.repeatRateUnit !== '1' &&
                          drawerForm.repeatRateUnit !== '2'
                        "
                        :rules="
                          drawerBooArr.find((item) => {
                            return item.type == 'cycle';
                          }).bool &&
                          drawerForm.repeatRateUnit !== '1' &&
                          drawerForm.repeatRateUnit !== '2'
                            ? drawerFormRules.h
                            : []
                        "
                      >
                        <el-input-number
                          v-model="drawerForm.h"
                          controls-position="right"
                          :min="1"
                          :max="12"
                          style="width: 80px"
                        ></el-input-number>
                        <span>{{ $t("小时") }}</span>
                      </el-form-item>
                      <el-form-item
                        prop="m"
                        v-if="drawerForm.repeatRateUnit !== '1'"
                        :rules="
                          drawerBooArr.find((item) => {
                            return item.type == 'cycle';
                          }).bool && drawerForm.repeatRateUnit !== '1'
                            ? drawerFormRules.m
                            : []
                        "
                      >
                        <el-input-number
                          v-model="drawerForm.m"
                          controls-position="right"
                          :min="1"
                          :max="60"
                          style="width: 80px"
                        ></el-input-number>
                        <span>{{ $t("分") }}</span>
                      </el-form-item>
                      <el-form-item
                        prop="s"
                        :rules="
                          drawerBooArr.find((item) => {
                            return item.type == 'cycle';
                          }).bool
                            ? drawerFormRules.s
                            : []
                        "
                      >
                        <el-input-number
                          v-model="drawerForm.s"
                          controls-position="right"
                          :min="1"
                          :max="60"
                          style="width: 80px"
                        ></el-input-number>
                        <span>{{ $t("秒") }}</span>
                      </el-form-item>
                    </div>
                  </el-row>
                </el-form-item>
                <!-- 超期上限 -->
                <el-form-item :label="$t('超期上限') + '：'" prop="agingTime">
                  <el-input-number
                    v-model="drawerForm.agingTime"
                    controls-position="right"
                    :step="0.5"
                    :min="0"
                    :max="7"
                  ></el-input-number>
                  <span style="color: #fff; margin-left: 5px">{{
                    $t("天")
                  }}</span>
                </el-form-item>
              </el-row>
            </div>
          </template>
          <!-- 算法样本 -->
          <div v-if="false" class="algorith">
            <div class="model-title">{{ $t("算法训练样本") }}</div>
            <el-form-item
              :label="$t('是否采集训练样本' + ':')"
              label-width="155px"
              prop="trainingSampleGather"
              :rules="
                drawerBooArr.find((item) => {
                  return item.type == 'cycle';
                }).bool
                  ? drawerFormRules.trainingSampleGather
                  : []
              "
            >
              <el-radio-group v-model="drawerForm.trainingSampleGather">
                <el-radio label="0">{{ $t("不采集") }}</el-radio>
                <el-radio label="1">{{ $t("采集") }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              v-if="drawerForm.trainingSampleGather == '1'"
              :label="$t('云台单向转动次数')"
              label-width="155px"
              prop="trainingSampleCount"
              :rules="
                drawerBooArr.find((item) => {
                  return item.type == 'cycle';
                }).bool && drawerForm.trainingSampleGather == '1'
                  ? drawerFormRules.trainingSampleCount
                  : []
              "
            >
              <el-select
                v-model="drawerForm.trainingSampleCount"
                :placeholder="$t('请选择')"
                style="width: 100px"
              >
                <el-option
                  v-for="item in trainingSampleCountList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <label>{{ $t("次") }}</label>
            </el-form-item>
            <el-form-item
              v-if="drawerForm.trainingSampleGather == '1'"
              :label="$t('云台转动角度间隔')"
              label-width="155px"
              prop="trainingSampleAngle"
              :rules="
                drawerBooArr.find((item) => {
                  return item.type == 'cycle';
                }).bool && drawerForm.trainingSampleGather == '1'
                  ? drawerFormRules.trainingSampleAngle
                  : []
              "
            >
              <el-select
                v-model="drawerForm.trainingSampleAngle"
                :placeholder="$t('请选择')"
                style="width: 100px"
              >
                <el-option
                  v-for="item in trainingSampleAngleList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <label>°</label>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div class="demo-drawer__footer drawer-footer">
        <div @click="submitBtn" class="serch-btn">{{ $t("保存") }}</div>
        <div @click="drawerVisible = false" class="reset-btn">
          {{ $t("取消") }}
        </div>
      </div>
    </el-drawer>
    <!-- 立即执行弹框 -->
    <TaskDialog
      :taskDialog="taskVisible"
      :taskName="taskName"
      @taskDialogConfirm="dialogConfirm"
      @taskDialogCancle="taskDialogCancle"
    ></TaskDialog>
  </div>
</template>
<script>
import moment from "moment";
import { mapGetters } from "vuex";
import { API_treeOption } from "@/api/data/objData";
import {
  API_pointsList,
  API_getImgUrl,
  API_TemplateList,
  API_templateInfo,
} from "@/api/task/template";
import { API_addTask } from "@/api/task/manage";
import TaskDialog from "@/components/TaskDialog";
import {
  API_taskControl, //任务控制
} from "@/api/robot/monitor";
import { parseTime } from "@/utils/time.js";
export default {
  dicts: ["viewType", "overType", "dimension", "taskType", "repeatRateUnit"],
  components: {
    TaskDialog,
  },
  data() {
    var stopPointOneValid = (rule, value, callback) => {
      if (!value) {
        callback(new Error(this.$t("请输入正确格式数据")));
      } else {
        //轨道
        if (this.globalRobotInfo.moveMotor == "1") {
          var pattern = /^\d+.?\d{0,2}$/;
          if (!pattern.test(value)) {
            callback(new Error(this.$t("小数点后最多只能输入两位")));
          } else {
            callback();
          }
        } else {
          // 轮式
          let oribrule = /^\d+$/;
          // 截取前两个并判断
          let start = value.slice(0, 2);
          let num = value.slice(2);
          if (start != "LM") {
            callback(new Error(this.$t("轮式地图停靠位置请以LM开头")));
          } else if (!oribrule.test(num)) {
            callback(new Error(this.$t("请输入正确的格式")));
          } else {
            callback();
          }
        }
      }
    };
    var objPass = (rule, value, callback) => {
      let arr = this.$refs.objTreeRef.getCheckedNodes();
      if (arr.length == 0 || !arr) {
        callback(new Error(this.$t("请选择巡检对象")));
      } else {
        callback();
      }
    };
    var pointPass = (rule, value, callback) => {
      let arr = this.$refs.pointTreeRef.getCheckedNodes();
      if (arr.length == 0 || !arr) {
        callback(new Error(this.$t("请选择巡检对象")));
      } else {
        callback();
      }
    };
    return {
      //定期执行限制
      timePickerOption: {
        disabledDate: (time) => {
          return time.getTime() < Date.now() - 1 * 24 * 3600 * 1000;
        },
        // },
        // selectableRange:
        //   parseTime(
        //     new Date(moment().format("YYYY-MM-DD HH:mm:ss")),
        //     "{hh}:{ii}:{ss}"
        //   ) + "- 23:59:00",
      },
      pickerOptionsStart: {
        disabledDate: (time) => {
          let endDateVal = this.drawerForm.endTime;
          if (endDateVal) {
            return (
              time.getTime() >=
                new Date(endDateVal).getTime() + 1 * 24 * 60 * 60 * 1000 ||
              time.getTime() < Date.now() - 8.64e7
            );
          } else {
            return time.getTime() < Date.now() - 8.64e7; //禁用以前的日期，今天不禁用
          }
        },
      },
      pickerOptionsEnd: {
        disabledDate: (time) => {
          let beginDateVal = this.drawerForm.startTime;
          let secondNum =
            new Date(beginDateVal).getTime() + 1000 * 60 * 60 * 24 * 90;
          if (beginDateVal) {
            return (
              time.getTime() > secondNum ||
              time.getTime() < new Date(beginDateVal).getTime()
            );
          } else {
            return (
              time.getTime() > Date.now() - 8.64e7 + 1000 * 60 * 60 * 24 * 90 ||
              time.getTime() < Date.now() - 8.64e7
            ); //禁用以前的日期，今天不禁用
          }
        },
      },
      taskVisible: false, //弹框显示隐藏
      showTree: true, //巡检对象维度
      showPoint: false, //巡检点维度
      isShowSelectTemplate: false, //选择模板
      isShowTaskTemplateName: false, //是否展示模板名称
      drawerVisible: false, //弹出层
      sevePort: window.location.protocol + "//" + window.location.host,
      currentPointId: "",
      mapId: "",
      currentTab: "",
      drawerTitle: this.$t("新增任务"), //抽屉盒字标题
      currentTreeId: "", //树节点被点击高亮
      taskId: "", //全局当前任务id
      taskProcess: "", //当前任务状态
      execId: "", //全局当前任务执行id
      taskName: "", //全局当前任务名称
      addParams: {
        taskName: "",
        addType: "1", //新增方式
        tempId: "",
        viewType: "",
        overType: "",
        overStopPoint: "", //结束动作
        dimension: "1",
        priority: "",
        patrolPathType: "1",
        isSaveToTemp: "0", //是否保存为模板
        taskTemplateName: "", //模板名称
      },
      objNodeName: "", //被点击巡检对象名称
      pointNodeName: "", //被点击巡检点名称
      templateList: [], //模板列表
      // 优先级数据
      priorityList: [
        {
          value: "1",
          label: this.$t("一级"),
        },
        {
          value: "2",
          label: this.$t("二级"),
        },
        {
          value: "3",
          label: this.$t("三级"),
        },
        {
          value: "4",
          label: this.$t("四级"),
        },
        {
          value: "5",
          label: this.$t("五级"),
        },
      ],
      // 巡检对象tree
      deptOptions: undefined,
      defaultProps: {
        children: "children",
        label: "label",
      },
      pointDefaultProps: {
        children: "children",
        label: "label",
      },
      //巡检对象tree图标
      objIcons: {
        1: require("@/assets/images/objectData/rootobj.png"), //根节点
        2: require("@/assets/images/objectData/jiedianobj.png"), //节点
        3: require("@/assets/images/objectData/ptstobj.png"), //普通实体对象
        4: require("@/assets/images/objectData/ptxnobj.png"), //普通虚拟对象
        5: require("@/assets/images/objectData/hsstobj.png"), //红色实体对象
        6: require("@/assets/images/objectData/hsxnobj.png"), //红色虚拟对象
      },
      // 巡检点图标
      pointsIcons: {
        1: require("@/assets/images/objectData/root.png"), //根节点
        2: require("@/assets/images/objectData/pointjd.png"), //节点
        3: require("@/assets/images/objectData/ptst.png"), //普通实体对象
        4: require("@/assets/images/objectData/ptxn.png"), //普通虚拟对象
      },
      pointsList: [], //巡检点数据
      pointName: "", //巡检点名称
      deviceName: "", //设备名称
      deviceIdList: [], //选中的巡检对象数据
      pointIdList: [], //选中巡检点数据
      nodeItem: {}, //巡检对象、巡检点数据项
      camereList: [], //可见光 标定集合
      thermalList: [], //红外 标定集合
      //弹出层表单
      drawerForm: {
        taskType: "", //任务类型
        agingTime: "0", //超期上限
        regularStartTime: "", //定期执行开始时间
        cycleType: "1",
        validType: "2", //生效时长
        hurrySetting: "", //快速设置
        quickStartDate: "", //快速设置-开始日期
        quickEndDate: "", //快速设置-结束日期
        // 执行配置
        repeatRate: 3, //重复频率
        repeatRateUnit: "2", //重复频率单位
        //执行时间
        month: "", //循环monthsData获取isSelet为true
        week: "", //同上
        seconds: "",
        h: "",
        m: "",
        s: "",
        stopPointOne: "", //停靠点位置
        stopPointTwo: "", //停靠点位置
        trainingSampleGather: "0", //是否采集训练样本
        trainingSampleCount: "", //云台转动次数
        trainingSampleAngle: "", //云台转动间隔
        //常规  生效时段
        startTime: "", //开始日期
        endTime: "", //结束日期
        overTimeLength: 120, //超时时长
        overTimeActionType: "", //超时动作
        executeTimePre: 8, //启动时间 前
        executeTimeNext: 0, //启动时间 后
      },
      currentSetting: "", //快速设置
      monthActive: "", //多选的月份
      weekActive: "", //多选的周
      //超时动作数组
      drawActionOptions: [],
      //弹框内部数据
      drawerBooArr: [
        {
          nums: "1",
          bool: false,
          type: "immediate",
        },
        {
          nums: "2",
          bool: false,
          type: "regular",
        },
        {
          nums: "3",
          bool: false,
          type: "cycle",
        },
      ],
      //快速设置数组
      hurrySetting: [
        {
          value: "1",
          label: this.$t("本月"),
        },
        {
          value: "2",
          label: this.$t("本季度"),
        },
        {
          value: "3",
          label: this.$t("本年"),
        },
        {
          value: "4",
          label: this.$t("未来30天"),
        },
        {
          value: "5",
          label: this.$t("未来90天"),
        },
        {
          value: "6",
          label: this.$t("未来365天"),
        },
      ],
      //执行配置--月
      monthsData: [
        {
          label: "1",
          isSelected: false,
        },
        {
          label: "2",
          isSelected: false,
        },
        {
          label: "3",
          isSelected: false,
        },
        {
          label: "4",
          isSelected: false,
        },
        {
          label: "5",
          isSelected: false,
        },
        {
          label: "6",
          isSelected: false,
        },
        {
          label: "7",
          isSelected: false,
        },
        {
          label: "8",
          isSelected: false,
        },
        {
          label: "9",
          isSelected: false,
        },
        {
          label: "10",
          isSelected: false,
        },
        {
          label: "11",
          isSelected: false,
        },
        {
          label: "12",
          isSelected: false,
        },
      ],
      //执行配置--周
      weekData: [
        {
          label: this.$t("一"),
          isSelected: false,
        },
        {
          label: this.$t("二"),
          isSelected: false,
        },
        {
          label: this.$t("三"),
          isSelected: false,
        },
        {
          label: this.$t("四"),
          isSelected: false,
        },
        {
          label: this.$t("五"),
          isSelected: false,
        },
        {
          label: this.$t("六"),
          isSelected: false,
        },
        {
          label: this.$t("七"),
          isSelected: false,
        },
      ],
      // 云台转动次数
      trainingSampleCountList: [
        {
          label: "1",
          value: "1",
        },
        {
          label: "2",
          value: "2",
        },
        {
          label: "3",
          value: "3",
        },
        {
          label: "4",
          value: "4",
        },
        {
          label: "5",
          value: "5",
        },
      ],
      // 转动角度间隔
      trainingSampleAngleList: [
        {
          label: "0.1",
          value: "0.1",
        },
        {
          label: "0.2",
          value: "0.2",
        },
        {
          label: "0.3",
          value: "0.3",
        },
        {
          label: "0.4",
          value: "0.4",
        },
        {
          label: "0.5",
          value: "0.5",
        },
      ],
      formRules: {
        overStopPoint: [
          { required: true, validator: stopPointOneValid, trigger: "blur" },
        ],
        stopPointOne: [
          { required: true, validator: stopPointOneValid, trigger: "blur" },
        ],
        stopPointTwo: [
          { required: true, validator: stopPointOneValid, trigger: "blur" },
        ],
        taskName: [
          {
            required: true,
            message: this.$t("任务名称不能为空"),
            trigger: "blur",
          },
        ],
        addType: [
          {
            required: true,
            message: this.$t("新增方式不能为空"),
            trigger: "blur",
          },
        ],
        tempId: [
          {
            required: true,
            message: this.$t("模板不能为空"),
            trigger: "blur",
          },
        ],
        viewType: [
          {
            required: true,
            message: this.$t("巡检类型不能为空"),
            trigger: "change",
          },
        ],
        overType: [
          {
            required: true,
            message: this.$t("结束动作不能为空"),
            trigger: "change",
          },
        ],
        dimension: [
          {
            required: true,
            message: this.$t("巡检维度不能为空"),
            trigger: "change",
          },
        ],
        priority: [
          {
            required: true,
            message: this.$t("优先级不能为空"),
            trigger: "change",
          },
        ],
        patrolPathType: [
          {
            required: true,
            message: this.$t("巡检路径不能为空"),
            trigger: "change",
          },
        ],
        objTreeList: [
          { required: true, validator: objPass, trigger: "change" },
        ],
        pointTreeList: [
          { required: true, validator: pointPass, trigger: "change" },
        ],
        isSaveToTemp: [
          {
            required: true,
            message: this.$t("是否保存为模板不能为空"),
            trigger: "change",
          },
        ],
        taskTemplateName: [
          {
            required: true,
            message: this.$t("模板名称不能为空"),
            trigger: "change",
          },
        ],
      },
      drawerFormRules: {
        taskType: [
          {
            required: true,
            message: this.$t("任务类型不能为空"),
            trigger: "blur",
          },
        ],
        agingTime: [
          {
            required: true,
            message: this.$t("超时上限制不能为空"),
            trigger: "blur",
          },
        ],
        regularStartTime: [
          {
            required: true,
            message: this.$t("开始时间不能为空"),
            trigger: "blur",
          },
        ],
        cycleType: [
          { required: true, message: this.$t("周期类型"), trigger: "blur" },
        ],
        validType: [
          {
            required: true,
            message: this.$t("请选择生效时长"),
            trigger: "change",
          },
        ],
        quickStartDate: [
          {
            required: true,
            message: this.$t("开始时间不能为空"),
            trigger: "change",
          },
        ],
        quickEndDate: [
          {
            required: true,
            message: this.$t("结束时间不能为空"),
            trigger: "change",
          },
        ],
        // 重复频率
        repeatRate: [
          {
            required: true,
            message: this.$t("重复频率不能为空"),
            trigger: "blur",
          },
        ],
        s: [
          { required: true, message: this.$t("秒数不能为空"), trigger: "blur" },
        ],
        m: [
          { required: true, message: this.$t("分钟不能为空"), trigger: "blur" },
        ],
        h: [
          { required: true, message: this.$t("小时不能为空"), trigger: "blur" },
        ],
        trainingSampleGather: [
          {
            required: true,
            message: this.$t("训练样本不能为空"),
            trigger: "blur",
          },
        ],
        trainingSampleCount: [
          {
            required: true,
            message: this.$t("云台单向转动次数不能为空"),
            trigger: "change",
          },
        ],
        trainingSampleAngle: [
          {
            required: true,
            message: this.$t("云台单向转动次数不能为空"),
            trigger: "change",
          },
        ],
        overTimeLength: [
          {
            required: true,
            message: this.$t("超时时长不能为空"),
            trigger: "change",
          },
        ],
        overTimeActionType: [
          {
            required: true,
            message: this.$t("超时动作不能为空"),
            trigger: "change",
          },
        ],
        startTime: [
          {
            required: true,
            message: this.$t("开始日期不能为空"),
            trigger: "change",
          },
        ],
        endTime: [
          {
            required: true,
            message: this.$t("结束日期不能为空"),
            trigger: "change",
          },
        ],
      },
      checkedObj: [], //巡检对象、巡检点循环数据
      currentTaskTimer: null,
    };
  },
  computed: {
    ...mapGetters(["globalRobotInfo", "globalCurrentTaskInfo"]),
  },
  async created() {
    await this.getTreeselect();
    await this.getPointsList();
    this.addParams.taskName = "任务" + this.insertTempName();
  },
  async mounted() {
    await this.getTreeselect();
    await this.getPointsList();
    this.mapId = this.globalRobotInfo.map.uuid;
    this.currentTaskTimer = setInterval(() => {
      this.getTaskInfo();
    }, 1000);
  },
  methods: {
    /**定期任务时间处理 */
    handleRegularStartTime() {
      var startAt = (new Date(this.drawerForm.regularStartTime) * 1000) / 1000;
      if (startAt < Date.now()) {
        this.$message.warning("历史时间不支持选择，已切换为当前时间！");
        this.drawerForm.regularStartTime = new Date();
      }
    },
    /**获取当前任务信息 */
    getTaskInfo() {
      this.$store.dispatch("getGlobalTaskInfo").then((res) => {
        if (res.code == 200 && res.data) {
          this.taskId = JSON.parse(res.data).taskId; //任务ID
          this.taskProcess = JSON.parse(res.data).taskProcess; //任务状态
          this.execId = JSON.parse(res.data).execId; //任务执行ID
          this.taskName = JSON.parse(res.data).taskName; //任务名称
        }
      });
    },
    /**选择模板 change */
    selectTemplateChange(val) {
      if (val == "") return;
      console.log(this.templateList, "==========");
      this.showTree =
        this.templateList.find((item) => {
          return item.id == val;
        }).dimension == 1;
      this.getTemplateInfo(val);
    },
    /**清空模板数据 */
    selectTemplateClear() {
      this.showTree = true;
      // this.showPoint = false;
      this.addParams = {
        tempId: "",
        viewType: "",
        overType: "",
        dimension: "1",
        priority: "",
        patrolPathType: "1",
        isSaveToTemp: "0", //是否保存为模板
        taskTemplateName: "", //模板名称
      };
      this.$nextTick(() => {
        this.$refs.pointTreeRef.setCheckedNodes([]);
        this.$refs.objTreeRef.setCheckedNodes([]);
      });
    },
    /**树节点 变动事件 */
    treeCheckChange(item, isChecked, type) {
      switch (type) {
        //巡检对象
        case "obj":
          //勾选顺序
          if (item.type !== "1") {
            if (isChecked == true) {
              let isBool = this.checkedObj.some((checkItem) => {
                return checkItem.treeId == item.treeId;
              });
              if (!isBool) {
                this.checkedObj.push({ treeId: item.treeId });
              }
            } else {
              this.checkedObj.forEach((listItem, listIndex) => {
                if (listItem.treeId == item.treeId) {
                  this.checkedObj.splice(listIndex, 1);
                }
              });
            }
          }

          break;
        //巡检点
        case "point":
          //勾选顺序
          if (item.type == "1") {
            if (isChecked == true) {
              let isBool = this.checkedObj.some((checkItem) => {
                return checkItem.id == item.id;
              });
              if (!isBool) {
                this.checkedObj.push({ id: item.id });
              }
            } else {
              this.checkedObj.forEach((listItem, listIndex) => {
                if (listItem.id == item.id) {
                  this.checkedObj.splice(listIndex, 1);
                }
              });
            }
          }
          break;
      }
    },
    /**任务模板列表 */
    getTemplateList() {
      API_TemplateList({}).then((res) => {
        if (res.code == 200) {
          if (res.rows.length > 0) {
            this.templateList = res.rows;
          } else {
            this.templateList = [];
          }
        }
      });
    },

    //新增方式 change
    addTypeChange(val) {
      if (val == "") return;
      this.addParams.tempId = "";
      switch (val) {
        case "1":
          this.isShowSelectTemplate = false;
          break;
        case "2":
          this.isShowSelectTemplate = true;
          this.getTemplateList();
          break;
      }
    },
    //是否保存模板 change
    isSaveTemplateChange(val) {
      switch (val) {
        case "0":
          this.isShowTaskTemplateName = false;
          break;
        case "1":
          this.isShowTaskTemplateName = true;
          this.addParams.taskName = "任务模板" + this.insertTempName();
          break;
      }
    },
    /**获取本地时间： */
    insertTempName() {
      var now = new Date();
      var year = now.getFullYear();
      var month = now.getMonth();
      month = month + 1;
      var date = now.getDate();
      var hours = now.getHours();
      var minuts = now.getMinutes();
      var seconds = now.getSeconds();
      if (month < 10) {
        month = "0" + month;
      }
      if (date < 10) {
        date = "0" + date;
      }
      var time =
        year.toString() +
        month.toString() +
        date.toString() +
        hours.toString() +
        minuts.toString() +
        seconds.toString();
      return time;
    },
    // 巡检点click
    pointItemClick(point) {
      // 设置高亮
      if (this.currentPointId != point.id) {
        this.$set(this, "currentPointId", point.id);
      }
      // 设置可见光为默认值
      this.$set(this, "currentTab", "1");
    },
    async nodeClick(node, type) {
      console.warn("node---", node);
      //清除原本数组中的数据
      this.camereList = [];
      this.thermalList = [];
      this.currentTreeId = "";
      switch (type) {
        case "obj":
          if (node.type == "2") {
            this.nodeItem = await this.getNodeInfo({ deviceId: node.treeId });
            //设置可见光高亮
            this.$set(this, "currentTab", "1");
            this.currentTreeId = node.treeId;
            this.objNodeName = node.name;
          } else {
            this.$message.info(this.$t("请选择巡检对象查看可见光与红外"));
            return;
          }
          break;
        case "point":
          if (node.type == "1") {
            this.nodeItem = await this.getNodeInfo({ pointId: node.id });
            // 设置可见光高亮
            this.$set(this, "currentTab", "1");
            this.currentTreeId = node.id;
            this.pointNodeName = node.name;
          } else {
            this.$message.info(this.$t("请选择巡检点查看可见光与红外"));
            return;
          }
          break;
      }
      this.pointName = this.nodeItem.pointName;
      this.deviceName = this.nodeItem.deviceName;
      //可见光
      let cameroUrl = this.sevePort + this.nodeItem.cameraUrl;
      //点集合
      this.nodeItem.deviceList.forEach((listItem) => {
        eval(listItem.auxiliaryBox).filter((pointItem) => {
          if (pointItem.device_type == 0) {
            this.camereList.push(pointItem.device_bBox);
          } else {
            this.thermalList.push(pointItem.device_bBox);
          }
        });
      });
      //标定多边形
      this.selectArea(cameroUrl, this.camereList);
    },
    /** tab点击 */
    tabClick(type) {
      switch (type) {
        case "1":
          this.$set(this, "currentTab", "1");
          //图片
          let cameroUrl = this.sevePort + this.nodeItem.cameraUrl;
          //标定多边形
          this.selectArea(cameroUrl, this.camereList);
          break;
        case "2":
          this.$set(this, "currentTab", "2");
          //图片
          let redUrl = this.sevePort + this.nodeItem.thermalUrl;
          //标定多边形
          this.selectArea(redUrl, this.thermalList);
          break;
      }
    },
    /**巡检维度 change */
    treeNodeChange(val) {
      this.currentTreeId = "";
      switch (val) {
        case "1":
          console.warn("巡检对象");
          this.showTree = true;
          // this.showPoint = false;
          this.checkedObj = [];
          this.$refs.pointTreeRef.setCheckedNodes([]);
          break;
        case "2":
          console.warn("巡检点");
          this.showTree = false;
          // this.showPoint = true;
          this.checkedObj = [];
          this.$refs.objTreeRef.setCheckedNodes([]);
          break;
      }
    },
    /**巡检路径 change */
    patrolPathTypeChange(val) {
      this.checkedObj = []; //清空已选节点排序数组
      if (this.addParams.dimension == "1") {
        this.$nextTick(() => {
          this.$refs.objTreeRef.setCheckedNodes([]);
        });
      } else {
        this.$nextTick(() => {
          this.$refs.pointTreeRef.setCheckedNodes([]);
        });
      }
    },
    /** 查询巡检对象树结构 */
    getTreeselect() {
      API_treeOption().then((res) => {
        if (res.code == "200") {
          this.deptOptions = res.deviceTrees;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    /**巡检点列表 */
    getPointsList() {
      API_pointsList().then((res) => {
        if (res.code == 200) {
          this.pointsList = res.data;
        } else {
          this.$message.info(res.msg);
        }
      });
    },
    /**获取巡检对象、巡检点信息图片 */
    getNodeInfo(query) {
      return new Promise((resolve, reject) => {
        API_getImgUrl(query).then((res) => {
          if (res.code == 200) {
            resolve(res.data);
          }
        });
      });
    },
    /**根据id查询模板信息 */
    getTemplateInfo(query) {
      API_templateInfo(query).then((res) => {
        if (res.code == 200) {
          //下拉框回显
          this.addParams.viewType = res.data.viewType + "";
          this.addParams.overType = res.data.overType + "";
          this.addParams.dimension = res.data.dimension + "";
          this.addParams.priority = res.data.priority + "";
          this.addParams.patrolPathType = res.data.patrolPathType + "";
          this.addParams.overStopPoint = res.data.overStopPoint + "";
          if (res.data.dimension == "1") {
            //巡检对象维度
            //被选中数据
            let deviceList = [];
            deviceList = res.data.templateDeviceRealList.map((item) => {
              return {
                treeId: item.deviceTreeId,
              };
            });
            //选中树的排序
            this.checkedObj = [...deviceList];
            console.warn("deviceList", deviceList);
            this.$refs.objTreeRef.setCheckedNodes(deviceList);
          } else if (res.data.dimension == "2") {
            // 巡检点维度
            // this.showTree = false;
            // this.showPoint = true;
            let ids = [];
            ids = res.data.templatePointRealList.map((item) => {
              return {
                id: item.pointId,
              };
            });
            console.warn("ids", ids);
            this.checkedObj = [...ids];
            this.$refs.pointTreeRef.setCheckedNodes(ids);
          }
        }
      });
    },
    /**取消 btn */
    cancleBtn() {
      this.$router.go(-1);
    },
    /**下一步 btn */
    nextStep() {
      this.$refs.addRef.validate((valid) => {
        if (valid) {
          //清除校验
          setTimeout(() => {
            this.$refs["drawerRef"].clearValidate();
          }, 0);
          this.drawerBooArr.forEach((item) => {
            item.bool = false;
          });
          this.resetDrawerForm();
          this.drawerVisible = true;
        }
      });
    },
    /**抽屉盒子 */
    /**任务类型 change */
    drawTaskChange(val) {
      console.warn("val", val);
      this.drawerForm.overTimeLength = 120;
      this.drawerForm.overTimeActionType = "";
      this.drawerForm.agingTime = "0";
      setTimeout(() => {
        this.$refs["drawerRef"].clearValidate();
      }, 0);
      switch (val) {
        //立即执行
        case "1":
          this.drawerForm.overTimeLength = "即时任务无时长限制";
          this.drawerForm.overTimeActionType = "0";
          this.drawActionOptions = [
            {
              value: "0",
              label: this.$t("无"),
            },
          ];
          break;
        //定期执行
        case "2":
          this.drawActionOptions = [
            {
              value: "1",
              label: this.$t("原地待命"),
            },
            {
              value: "2",
              label: this.$t("回充电桩"),
            },
            // {
            //   value: "3",
            //   label: "回到起点",
            // },
            {
              value: "4",
              label: this.$t("前往停靠点"),
            },
          ];
          break;
        case "3":
          this.drawerForm.overTimeLength = 120;
          break;
      }
      this.drawerBooArr.forEach((item) => {
        if (item.nums == val) {
          item.bool = true;
        } else {
          item.bool = false;
        }
      });
    },

    /**选择快速设置 */
    chooseQuickSetting(index) {
      if (this.currentSetting != index) {
        this.currentSetting = ""; //清空数据
        this.currentSetting = index;
      }
      // 处理时间
      switch (index) {
        //本月
        case 0:
          this.drawerForm.quickStartDate = moment()
            .startOf("month")
            .format("YYYY-MM-DD HH:mm:ss");
          this.drawerForm.quickEndDate = moment()
            .endOf("month")
            .format("YYYY-MM-DD HH:mm:ss");
          break;
        // 本季度;
        case 1:
          this.drawerForm.quickStartDate = moment(
            moment().quarter(moment().quarter()).startOf("quarter").valueOf()
          ).format("YYYY-MM-DD HH:mm:ss");
          this.drawerForm.quickEndDate = moment(
            moment().quarter(moment().quarter()).endOf("quarter").valueOf()
          ).format("YYYY-MM-DD HH:mm:ss");
          break;
        // 本年
        case 2:
          this.drawerForm.quickStartDate = moment()
            .year(moment().year())
            .startOf("year")
            .format("YYYY-MM-DD HH:mm:ss")
            .valueOf();
          this.drawerForm.quickEndDate = moment()
            .year(moment().year())
            .endOf("year")
            .format("YYYY-MM-DD HH:mm:ss")
            .valueOf();
          break;
        // 未来30天
        case 3:
          this.drawerForm.quickStartDate = moment(new Date()).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          this.drawerForm.quickEndDate = moment(new Date())
            .add(30, "days")
            .format("YYYY-MM-DD HH:mm:ss");
          break;
        // 未来90天
        case 4:
          this.drawerForm.quickStartDate = moment(new Date()).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          this.drawerForm.quickEndDate = moment(new Date())
            .add(90, "days")
            .format("YYYY-MM-DD HH:mm:ss");
          break;
        // 未来365天
        case 5:
          this.drawerForm.quickStartDate = moment(new Date()).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          this.drawerForm.quickEndDate = moment(new Date())
            .add(365, "days")
            .format("YYYY-MM-DD HH:mm:ss");
          break;
      }
    },
    /**重复频率 change */
    repeatRateUnitChange() {
      //处理月份
      this.monthsData = this.monthsData.map((item) => {
        return {
          label: item.label,
          isSelected: false,
        };
      });
      // 处理周
      this.weekData = this.weekData.map((item) => {
        return {
          label: item.label,
          isSelected: false,
        };
      });
    },
    /**选择 月 */
    monthClick(index, item) {
      this.monthActive = index;
      //然后通过这个属性判断是否选中点亮和取消
      item.isSelected = !item.isSelected;
    },
    /**选择 周 */
    weekClick(index, item) {
      this.weekActive = index;
      //然后通过这个属性判断是否选中点亮和取消
      item.isSelected = !item.isSelected;
    },
    /**弹框内部取消 */
    taskDialogCancle() {
      this.taskVisible = false;
    },
    /**弹框内部确认 */
    dialogConfirm(radioVal) {
      console.warn("radioVal", radioVal);
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      if (radioVal == 1) {
        //暂停当前任务
        API_taskControl({
          cmd: "3X12",
          values: [this.taskId, this.execId],
        })
          .then((res) => {
            if (res.code == 200 && res.data.nerrcode == 0) {
              setTimeout(() => {
                this.$message.success(this.$t("任务已暂停"));
              }, 500);
              //执行当前任务
              let usalParams = {
                ...this.addParams,
                deviceIdList: this.deviceIdList,
                pointIdList: this.pointIdList,
                mapId: this.mapId,
              };
              let immdrawParams = {
                taskType: this.drawerForm.taskType, //任务类型
                agingTime: this.drawerForm.agingTime, //超期上限
              };
              let immparams = { ...usalParams, ...immdrawParams };
              API_addTask(immparams).then((res) => {
                if (res.code == 200) {
                  this.$router.push({
                    path: "/task/manage",
                  });
                }
              });
            } else {
              this.$message.error(this.$t("暂停失败请重试"));
            }
          })
          .finally(() => {
            loading.close();
            this.taskVisible = false;
            this.drawerVisible = false;
          });
      } else if (radioVal == 2) {
        //终止当前任务
        API_taskControl({
          cmd: "3X13",
          values: [this.taskId, this.execId],
        })
          .then((res) => {
            if (res.code == 200 && res.data.nerrcode == 0) {
              this.$message({
                type: "success",
                message: this.$t("任务已终止"),
              });
              // 执行当前任务
              let usalParams = {
                ...this.addParams,
                deviceIdList: this.deviceIdList,
                pointIdList: this.pointIdList,
                mapId: this.mapId,
              };
              let drawParams = {
                taskType: this.drawerForm.taskType, //任务类型
                agingTime: this.drawerForm.agingTime, //超期上限
              };
              let immparams = { ...usalParams, ...drawParams };
              API_addTask(immparams).then((res) => {
                if (res.code == 200) {
                  this.$message.success(this.$t("新增任务成功"));
                  this.$router.go(-1);
                }
              });
            } else {
              this.$message.error(this.$t("暂停失败请重试"));
            }
          })
          .finally(() => {
            loading.close();
            this.taskVisible = false;
            this.drawerVisible = false;
          });
      } else {
        //继续当前任务
      }
    },
    /**保存 btn */
    submitBtn() {
      this.$refs.drawerRef.validate((valid) => {
        if (valid) {
          // 巡检对象 数据
          let type = this.addParams.dimension;
          switch (type) {
            case "1":
              this.deviceIdList = this.checkedObj.map((item) => item.treeId);
              break;
            case "2":
              this.pointIdList = this.checkedObj.map((item) => item.id);
              break;
          }
          let usalParams = {
            ...this.addParams,
            deviceIdList: this.deviceIdList,
            pointIdList: this.pointIdList,
            mapId: this.mapId,
          };
          let drawParams = {};
          switch (this.drawerForm.taskType) {
            case "1":
              // 判断是否有正在执行的任务
              if (this.taskId != -1 && this.taskProcess == "3") {
                //有 展示弹框
                this.taskVisible = true;
              } else {
                const immLoading = this.$loading({
                  lock: true,
                  text: "Loading",
                  spinner: "el-icon-loading",
                  background: "rgba(0, 0, 0, 0.7)",
                });
                drawParams = {
                  taskType: this.drawerForm.taskType, //任务类型
                  agingTime: this.drawerForm.agingTime, //超期上限
                };
                let immparams = { ...usalParams, ...drawParams };
                API_addTask(immparams)
                  .then((res) => {
                    if (res.code == 200) {
                      this.$message.success(this.$t("新增任务成功"));
                      this.$router.go(-1);
                    }
                  })
                  .finally(() => {
                    immLoading.close();
                  });
              }
              break;
            case "2":
              const loading = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
              });
              drawParams = {
                taskType: this.drawerForm.taskType, //任务类型
                startTime: moment(this.drawerForm.regularStartTime).format(
                  "YYYY-MM-DD HH:mm:ss"
                ), //启动时间
                overTimeLength: this.drawerForm.overTimeLength, //超时时长
                overTimeActionType: this.drawerForm.overTimeActionType, //超时动作
                agingTime: this.drawerForm.agingTime, //超期上限
                stopPoint: this.drawerForm.stopPointOne, //停靠点位置
              };
              let param = { ...usalParams, ...drawParams };
              API_addTask(param)
                .then((res) => {
                  if (res.code == 200) {
                    this.$message.success(this.$t("新增任务成功"));
                    this.$router.go(-1);
                  }
                })
                .finally(() => {
                  loading.close();
                });
              break;
            case "3":
              const loadingcyc = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
              });
              drawParams = {
                validType: "2",
                stopPoint: this.drawerForm.stopPointTwo, //停靠点位置
                taskType: this.drawerForm.taskType, //任务类型
                cycleType: this.drawerForm.cycleType, //周期类型
                startTime: moment(this.drawerForm.startTime).format(
                  "YYYY-MM-DD HH:mm:ss"
                ), //开始日期
                endTime: moment(this.drawerForm.endTime).format(
                  "YYYY-MM-DD HH:mm:ss"
                ), //结束日期
                executeTime: JSON.stringify({
                  h: this.drawerForm.executeTimePre,
                  m: this.drawerForm.executeTimeNext,
                }), //启动时间
                repeatRate: this.drawerForm.repeatRate, //重复频率
                repeatRateUnit: this.drawerForm.repeatRateUnit, //重复频率单位
                overTimeLength: this.drawerForm.overTimeLength, //超时时长
                overTimeActionType: this.drawerForm.overTimeActionType, //超时动作
                agingTime: this.drawerForm.agingTime, //超期上限
                // trainingSampleGather: this.drawerForm.trainingSampleGather, //训练样本采集标志
                trainingSampleCount: this.drawerForm.trainingSampleCount, //云台单向转动次数
                trainingSampleAngle: this.drawerForm.trainingSampleAngle, //云台转向角度间隔
              };
              let params = { ...usalParams, ...drawParams };
              API_addTask(params)
                .then((res) => {
                  if (res.code == 200) {
                    this.$message.success(this.$t("新增任务成功"));
                    this.$router.go(-1);
                  }
                })
                .finally(() => {
                  loadingcyc.close();
                });
              break;
          }
        }
      });
    },
    /**关闭前 */
    handleClose() {
      this.drawerVisible = false;
      this.resetDrawerForm();
    },
    /**重置drawer表单内容 */
    resetDrawerForm() {
      this.drawerForm = {
        agingTime: "0", //超期上限
        regularStartTime: "", //定期执行开始时间
        cycleType: "1",
        validType: "2", //生效时长
        hurrySetting: "", //快速设置
        quickStartDate: "", //快速设置-开始日期
        quickEndDate: "", //快速设置-结束日期
        // 执行配置
        repeatRate: 3, //重复频率
        repeatRateUnit: "2", //重复频率单位
        //执行时间
        month: "", //循环monthsData获取isSelet为true
        week: "", //同上
        seconds: "",
        h: "",
        m: "",
        s: "",
        trainingSampleGather: "0", //是否采集训练样本
        trainingSampleCount: "", //云台转动次数
        trainingSampleAngle: "", //云台转动间隔
        //常规  生效时段
        startTime: "", //开始日期
        endTime: "", //结束日期
        overTimeLength: 120, //超时时长
        overTimeActionType: "", //超时动作
        executeTimePre: 8, //启动时间 前
        executeTimeNext: 0, //启动时间 后
      };
    },
    /**画图形 */
    selectArea(imgSrc, sceneBox) {
      let ths = this;
      let canvas = this.$refs.canvasImg;
      let ctx = canvas.getContext("2d");
      let img = new Image();
      img.src = imgSrc;
      // img.width = 480;
      img.width = 636;
      img.height = 356;
      let [width, height] = [img.width, img.height];
      canvas.width = width;
      canvas.height = height;
      //显示图片
      img.onload = function () {
        ctx.drawImage(img, 0, 0, width, height);
        ths.initCanvas(sceneBox);
      };
    },
    /**canvas 画线 */
    initCanvas(sceneBox) {
      this.$nextTick(() => {
        let canvas = this.$refs.canvasImg;
        let ctx = canvas.getContext("2d");
        //画线
        sceneBox.forEach((boxList) => {
          // return;
          ctx.beginPath();
          let pointsArr = [];
          pointsArr = eval(boxList).map((item) => {
            return { x: item[0], y: item[1] };
          });
          pointsArr.forEach((item) => {
            ctx.lineTo(item.x, item.y);
          });
          ctx.closePath();
          ctx.lineCap = "round";
          ctx.lineJoin = "round";
          ctx.strokeStyle = "red";
          ctx.lineWidth = 3;
          ctx.closePath();
          ctx.stroke();
        });
      });
    },
  },
  beforeDestroy() {
    clearInterval(this.currentTaskTimer);
    this.currentTaskTimer = null;
  },
};
</script>
<style scoped lang="scss">
.canvasImg {
  border: 1px solid rgb(199, 198, 198);
}
.title-common {
  position: relative;
  font-size: 18px;
  font-family: HelveticaNeue-MediumItalic, HelveticaNeue;
  font-weight: normal;
  color: #00d1ff;
  line-height: 30px;
  .radiu {
    position: absolute;
    top: 12px;
    left: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(0, 209, 255, 0.2);
  }
}
.base-info,
.inspect-info,
.save-template,
.fixed-point {
  width: 100%;
  color: #fff;
  padding: 24px 24px 12px;
  box-sizing: border-box;
  border-bottom: 1px dashed rgba(219, 255, 251, 0.2);
}
// 基本信息
.base-info {
  height: 106px;
}
// 巡检信息
.inspect-info {
  min-height: 99px;
}
//保存为模板
.save-template {
  height: 99px;
}
//定点巡检
.fixed-point {
  // height: 576px;
  padding: 0;
  .tree {
    height: 99%;
    padding: 18px 24px 12px !important;
    box-sizing: border-box;
    border-right: 1px dashed rgba(219, 255, 251, 0.2);
  }
  .obj-text {
    width: 95%;
    // height: 67px;
    margin-left: 10px;
    padding: 8px;
    box-sizing: border-box;
    text-align: left;
    background-color: rgba(255, 173, 48, 0.06);
    font-size: 11px;
    font-family: SourceHanSansSC-Regular, SourceHanSansSC;
    font-weight: 400;
    color: #ffad30;
    line-height: 17px;
  }
}
//保存为模板
.save-temp {
  width: 100%;
  color: #fff;
  padding: 24px 24px 12px;
  box-sizing: border-box;
}
.flex-center {
  display: flex;
  justify-content: center;
  height: 100%;
  padding-top: 30px;
  box-sizing: border-box;
  .block-info {
    width: 874px;
    height: 416px;
    border: 1px solid #00d1ff;
    // 可见光
    .tabs {
      display: flex;
      width: 100%;
      height: 39px;
      padding: 11px 24px;
      box-sizing: border-box;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);

      .camero,
      .current-tab {
        width: 64px;
        height: 26px;
        font-size: 16px;
        text-align: center;
        margin-right: 20px;
      }
      .camero {
      }
      .current-tab {
        color: #00d1ff;
        border-bottom: 1px solid #00d1ff;
      }
    }
    .img-box {
      display: flex;
      width: 869px;
      height: 376px;
      padding: 8px;
      box-sizing: border-box;

      img {
        width: 640px;
        height: 360px;
      }
      .info {
        padding: 0 10px;
        box-sizing: border-box;
        div:nth-child(2) {
          margin: 15px 0;
        }
      }
    }
  }
}

.lists {
  display: flex;
  align-items: center;
  width: 300px;
  height: 40px;
  color: #fff;
  font-size: 14px;
  .point {
    width: 40px;
  }
}
.current-item {
  width: 100%;
  background-color: rgba(0, 209, 255, 0.1);
  .point {
    display: flex;
    justify-content: center;
    span {
      display: flex;
      width: 4px;
      height: 4px;
      background-color: #00d1ff;
      border-radius: 50%;
    }
  }
}
//生效时段
.model,
.config,
.algorith {
  margin-bottom: 10px;
  padding: 15px 24px 10px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.08);
  .model-title {
    font-size: 14px;
    font-family: SourceHanSansSC-Bold, SourceHanSansSC;
    font-weight: bold;
    color: #ffffff;
    line-height: 16px;
  }
  label {
    margin-left: 5px;
    color: #fff;
  }
}
.hurry-setting {
  display: flex;
  margin: 10px 0;
  .title {
    font-size: 16px;
    font-family: SourceHanSansSC-Regular, SourceHanSansSC;
    font-weight: 400;
    color: #ffffff;
    line-height: 16px;
  }
  .contents {
    margin-bottom: 10px;
    font-size: 14px;
    font-family: SourceHanSansSC-Regular, SourceHanSansSC;
    font-weight: 400;
    color: #ffffff;
    line-height: 16px;

    div {
      padding: 5px;
      margin-left: 5px;
      box-sizing: border-box;
      border-radius: 2px;
      background-color: rgba(255, 255, 255, 0.2);
    }
  }
  .current {
    margin-bottom: 10px;
    div {
      padding: 5px;
      margin-left: 5px;
      box-sizing: border-box;
      border-radius: 2px;
      color: #00d1ff;
      background-color: rgba(0, 209, 255, 0.2);
    }
  }
}
//执行配置
.config {
  color: #fff;
  //执行时间
  .month-time {
    display: flex;
    .months,
    .Active {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 8px;
      margin-left: 3px;
    }
    .months {
      background-color: rgba(255, 255, 255, 0.2);
    }
    .Active {
      margin-left: 1px;
      color: #00d1ff;
      background: rgba(0, 209, 255, 0.2);
      border: 1px solid rgba(0, 209, 255, 0.7);
    }
  }
}
.execute-time {
  display: flex;
  .el-form-item__content {
    flex: 1;
  }
}
.drawer-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  div:nth-child(2) {
    margin-left: 16px;
  }
}
.draw-content-explain {
  padding: 12px 0 12px 16px;
  font-size: 14px;
  background-color: rgba(255, 173, 48, 0.06);
  div {
    color: #ffad30;
  }
}
//抽屉盒子
.cycle-config {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  color: #ffffff;
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(219, 255, 251, 0.14);
  .chang-btn {
    display: flex;
    div {
      text-align: center;
      width: 52px;
      height: 24px;
      line-height: 24px;
      font-size: 14px;
      line-height: none !important;
    }
    div:nth-child(1) {
      background-color: rgba(0, 209, 255, 0.2);
      border-radius: 2px 0px 0px 2px;
      border: 1px solid #00d1ff;
    }
    div:nth-child(2) {
      background-color: rgba(219, 255, 251, 0.2);
      border-radius: 2px 0px 0px 2px;
      border: 1px solid #dbfffb;
      border-left: 0;
    }
  }
}
//底部
.footer {
  height: 76px;
  display: flex;
  justify-content: center;
  align-items: center;
  div:nth-child(2) {
    margin-left: 16px;
  }
}
.imgs-preview {
  position: relative;
  padding: 18px 24px 12px !important;
  box-sizing: border-box;
  span {
    position: absolute;
    top: 18px;
    left: 400px;
    font-size: 14px;
  }
}
.scroll-hidden {
  min-width: 518px;
  height: 365px;
  overflow: auto;
}
.scroll-hidden::-webkit-scrollbar {
  // display: none;
}
::v-deep {
  .el-checkbox__input.is-disabled .el-checkbox__inner {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.2);
  }
}
::v-deep {
  .el-form-item__label {
    font-size: 15px !important;
  }
}
// 巡检点维度二级节点不展示复选框
::v-deep {
  .point-tree .el-tree-node {
    .is-leaf + .el-checkbox .el-checkbox__inner {
      display: none;
    }
    .point-tree .el-checkbox .el-checkbox__inner {
      display: inline-block;
    }
  }
}
::v-deep {
  .el-drawer .el-drawer__body {
    overflow: auto !important;
  }
  .el-form-item__label {
    font-size: 14px !important;
  }
}
::v-deep {
  .el-input-number__increase,
  .el-input-number__decrease {
    background: transparent;
  }
  .el-icon-arrow-down:before,
  .el-icon-arrow-up:before {
    color: #fff;
  }
}
.el-drawer .el-form-item:nth-of-type(1) {
  margin-top: 0;
}
</style>
